<template>
  <el-dialog :visible="showOvertimeDialog" title="离职/加班申请" @close="handleBtnCancel">
    <el-form ref="formDataRef" label-width="120px" :model="formData" :rules="formDataRules">
      <el-form-item
        label="申请类型"
        prop="processKey"
      >
        <el-select
          v-model="formData.processKey"
          style="width: 40%;"
          @change="handleProcessKeyChange"
        >
          <el-option label="加班" value="process_overtime" />
          <el-option label="离职" value="process_dimission" />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formData.processKey =='process_overtime'"
        label="加班开始时间"
        prop="start_time"
      >
        <el-date-picker
          key="start_time"
          v-model="formData.start_time"
          style="width: 40%;"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:hh:ss"
        />
      </el-form-item>
      <el-form-item v-if="formData.processKey =='process_overtime'" label="加班结束时间" prop="end_time">
        <el-date-picker
          key="end_time"
          v-model="formData.end_time"
          style="width: 40%;"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:hh:ss"
        />
      </el-form-item>
      <el-form-item v-if="formData.processKey =='process_dimission'" label="期望离职时间" prop="exceptTime">
        <el-date-picker
          key="exceptTime"
          v-model="formData.exceptTime"
          style="width: 40%;"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:hh:ss"
        />
      </el-form-item>
      <el-form-item v-if="formData.processKey =='process_overtime'" label="补偿方式">
        调休
      </el-form-item>

      <el-form-item :label="formData.processKey =='process_overtime'? '加班原因': '离职原因'" prop="reason">
        <el-input :key="formData.processKey" v-model="formData.reason" type="textarea" :rows="3" style="width: 50%;" />
      </el-form-item>

    </el-form>
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="handleBtnOk">提交</el-button>
        <el-button size="small" @click="handleBtnCancel">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { startProcess } from '@/api/approvals'
import { mapGetters } from 'vuex'
export default {
  props: {
    showOvertimeDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        exceptTime: '',
        processKey: 'process_overtime',
        processName: '加班',
        reason: '',
        start_time: '',
        end_time: ''
      },
      formDataRules: {
        processKey: [
          { required: true, trigger: 'change', message: '申请类型不能为空' }
        ],
        start_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        end_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        exceptTime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '原因不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    // 在切换的时候移除验证结果
    handleProcessKeyChange(value) {
      this.$refs.formDataRef.clearValidate()
      // this.formData.reason = ''
    },
    // 点击提交按钮
    handleBtnOk() {
      this.$refs.formDataRef.validate(async isOk => {
        if (isOk) {
          if (this.formData.processKey === 'process_overtime') { // 加班
            await startProcess({
              processKey: 'process_overtime',
              processName: '加班',
              reason: this.formData.reason,
              start_time: this.formData.start_time,
              end_time: this.formData.end_time,
              userId: this.userId
            })
          } else {
            await startProcess({
              processKey: 'process_dimission',
              processName: '离职',
              reason: this.formData.reason,
              exceptTime: this.formData.exceptTime,
              userId: this.userId
            })
          }

          this.$message.success('提交成功')
          this.handleBtnCancel()
        }
      })
    },
    handleBtnCancel() {
      this.formData = {
        exceptTime: '',
        processKey: 'process_overtime',
        processName: '加班',
        reason: '',
        start_time: '',
        end_time: ''
      }
      this.$refs.formDataRef.resetFields()
      this.$emit('update:showOvertimeDialog', false)
    }
  }
}

</script>
<style lang='less' scoped>
</style>
